<template>
  <div
    class="
      vc-absolute
      vc-left-0
      vc-bottom-0
      vc-z-50
      vc-bg-white
      vc-border
      vc-border-red-400
      vc-border-solid
      vc-overflow-hidden
    "
  >
    <div v-show="visible" class="vc-text-right vc-text-blue-500 vc-p-1" @touchstart="stop">
      <a class="vc-mr-2" @click="data = []">清空</a>
      <a @click="hide">隐藏</a>
    </div>
    <div
      v-show="visible"
      ref="containerEl"
      class="vc-px-1 vc-max-h-60 vc-overflow-auto vc-w-64 vc-text-xs"
      @touchstart="stop"
    >
      <div v-for="(el, i) in data" :key="i">
        <span class="vc-text-gray-400 vc-mr-2">{{ i }}</span>
        {{ el.text }}
      </div>
    </div>
    <a v-show="!visible" class="vc-inline-block vc-p-3 vc-text-blue-800" @click="show">logger</a>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, shallowRef } from "vue";

interface LogItem {
  text: string;
}

const data = ref<LogItem[]>([]);
const visible = ref(false);
const containerEl = shallowRef<HTMLDivElement>();

function stop(e: Event) {
  e.stopPropagation();
}
window.Logger = {
  log(...args) {
    if (data.value.length > 1000) {
      data.value = [];
    }
    let arr: string[] = [];
    args.forEach((el) => {
      if (typeof el === "object") {
        el = JSON.stringify(el);
      } else {
        el = String(el);
      }
      arr.push(el);
    });
    data.value.push({
      text: arr.join(","),
    });
    nextTick(() => {
      if (containerEl.value) {
        containerEl.value.scrollTop = 99999;
      }
    });
  },
};
function show() {
  visible.value = true;
}
function hide() {
  visible.value = false;
}
</script>
